<template>
  <view>
      <!-- 因为这个uview-ui采用的是 easycom 模式， 所以不需要引入和注册，直接使用 -->
      <!-- 小程序原生的组件可以使用， 但是里面的一些语法需要转换为 vue 的语法 -->
    <!-- <TestCom /> -->
    <!-- <my-image /> -->

    <!-- 搜索框模块 -->
    <ugo-search />

    <!-- 轮播图模块 -->
    <!-- 这个组件是小程序原生的，我们应该是小程序官网查看这个示例代码，拿过来直接使用 -->
    <!-- 然后再稍微改一下vue的语法，配合假数据，就可以渲染了 -->
    <swiper indicator-dots :circular="true" :autopla="true">
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <navigator :url="item.navigator_url" :open-type="item.open_type">
          <image :src="item.image_src" mode="widthFix" />
        </navigator>
      </swiper-item>
    </swiper>
     
    <!-- 入口导航模块 -->
    <view class="nav">
      <tempalte v-for="item in navList" :key="item.name">
        <navigator v-if="item.navigator_url" :url="item.navigator_url" :open-type="item.open_type">
          <image :src="item.image_src" mode="widthFix" />
        </navigator>
        <image v-else :src="item.image_src" mode="widthFix" />
      </tempalte>
    </view>

    <!-- 楼层模块 -->
    <view class="m-floor">
      <view class="floor" v-for="(item, index) in floorList" :key="index">
        <view class="floor-title">
          <image :src="item.floor_title.image_src" mode="widthFix" />
        </view>
        <view class="product-list">
          <navigator
            :url="item.product_list[0].navigator_url"
            :open-type="item.product_list[0].open_type"
            hover-class="none"
          >
            <image :src="item.product_list[0].image_src" mode="heightFix" />
          </navigator>
          <navigator
            v-for="childItem in item.product_list.slice(1)"
            :key="childItem.name"
            :url="childItem.navigator_url"
            :open-type="childItem.open_type"
            hover-class="none"
          >
            <image :src="childItem.image_src" mode="heightFix" />
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import TestCom from '@/components/TestCom.vue';
export default {
  // components:{ TestCom},
  data() {
    return {
      // 轮播图列表
      swiperList: [],
      // 入口导航列表
      navList: [],
      // 楼层列表
      floorList: [],
    };
  },
  // 使用的是小程序的页面生命周期钩子
  async onLoad() {
    this.getSwiperList();
    this.getNavList();
    this.getFloorList();

    // 脚本条件编译
    /* #ifdef MP-WEIXIN */
    console.log('🎯MP-WEIXIN端运行~')
    /* #endif */

    /* #ifdef H5 */
    console.log('🟠H5端运行~')
    /* #endif */
  },
  methods: {
   async getSwiperList() {
    // 小程序练习请求接口： https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312
    // 如果模拟器报错    [Symbol.iterator]()  含有这些字段， 那么就不能使用解构赋值
    // uni.request 是uni-app 提供的前缀， 因为最后uni-app要打包陈14个平台的代码
    // 如果我们只用 wx.request， 只能在微信小程序里面， 其他平台就用不了了
    // const [error, res] = xxx  是数组解构的方法

    // 1️⃣我之前写原生小程序的时候，使用的是 wx.request工作里面，使用了一个第三方的包，将元素的小程序发清求，包装成了promise的写法(wx-https)

    // 发请求
    // 2️⃣uni-app 使用这个框架写过小程序，最开始的时候，使用的是uni-app里面提供的默认的发请求方式 uni.request,这个方法被uni-app自己封装为了 promise 的版本，但是返回值是一个数组的形式， 不是很好用

    // const res = await uni.request({
    //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    //   method: 'GET',
    // });
    // // 因为这里是vue的语法，不需要写setData。 uni-app这个框架底层会自动帮我使用setData
    // this.swiperList = res[1].data.message;

    // 将首页的请求更换为4️⃣$u.http的形式---uni.$u.http.request({xxxxx})
    // 3️⃣之前的小程序使用的ui框架是 uview-ui,这个框架除了给我们提供了组件以外，还给全局的uni绑定了一些优化请求的方式，uni.$u.http 我们就可以配置请求的基地址,请求响应拦截器。后面的工作一直用的是它

    const res = await uni.$u.http.request({
      url: '/home/swiperdata',
      method: 'GET'
    });
    // console.log(res.data.message);
    this.swiperList = res.data.message;
    },
    async getNavList() {
      const res = await uni.$u.http.request({
        url:'/home/catitems',
        method:'GET'
      });
    // console.log(res);
    // console.log(res.data.message);
    this.navList = res.data.message;
    },
    async getFloorList() {
      const res = await uni.$u.http.request({
        url: '/home/floordata',
        method: 'GET',
      });
      console.log(res);
      console.log(res.data.message);
      this.floorList = res.data.message;
    },
  },
};
</script>

<style lang="scss">
// 轮播图模块
swiper {
  width: 750rpx;
  height: 150px;
  navigator {
    height: 150px;
    & image {
      width: 750rpx;
      height: 150px;
    }
  }
}

// 入口导航模块
.nav {
  display: flex;
  justify-content: space-around;
  padding: 20px 10px;
  navigator {
    width: 128rpx;
    height: 140rpx;
    image {
      width: 128rpx;
      height: 140rpx;
    }
  }
  image {
    width: 128rpx;
    height: 140rpx;
  }
}

.floor-title {
  image {
    width: 750rpx;
  }
}
.product-list {
  navigator {
    float: left;
    margin-left: 12rpx;
    margin-bottom: 10rpx;
    image {
      height: 188rpx;
    }
    &:nth-child(1) {
      image {
        height: 386rpx;
      }
    }
  }
}
</style>
